<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/static/css/reset.css"/>
    <link rel="shortcut icon" href="/logo.ico"/>
    <link rel="bookmark" href="/logo.ico"/>
    <script type="text/javascript" src="/static/js/jquery-3.2.1.js"></script>
    <title></title>
    <style type="text/css">
        html {
            background: #efefef;
        }

        p {
            position: relative;
            height: 1rem;
            width: 90%;
            margin: 0 auto;
            border-bottom: 1px solid lightgray;
        }

        p input {
            outline: none;
            text-indent: 0.4rem;
            font-size: 0.3rem;
            height: 100%;
            width: 100%;
            background: rgba(0, 0, 0, 0);
        }

        p button {
            display: inline-block;
            font-size: 0.3rem;
            color: gray;
            position: absolute;
            top: 0.35rem;
            right: 0.3rem;
        }

        div {
            width: 80%;
            height: 1rem;
            line-height: 1rem;
            text-align: center;
            background: #D81E06;
            color: #fff;
            font-size: 0.3rem;
            margin: 0.5rem auto 0;
            border-radius: 0.1rem;
        }

        i {
            width: 100%;
            text-align: center;
            display: inline-block;
            color: gray;
            margin-top: 0.4rem;
        }

        i wet {
            color: blue;
        }
    </style>
</head>
<body>
<form id="form1">
    <p style="padding-top: 2rem;">
        <input type="number" value="" id="phone_input" name="phone" placeholder="请输入手机号"/>
    </p>
    <p>
        <input type="number" id="code" name="code" placeholder="请输入验证码"/>
        <button id="sendSms" disabled>获取验证码</button>
    </p>
    <div id="login">登录</div>
    <i>点击登录，即表示已阅读并同意
        <wet>《车友援服务协议》</wet>
    </i>
</form>
</body>
<script type="text/javascript">

    $(() => {

        /* {# 如果手机号input中没有数据，那么发送短信按钮不能点击 #}*/
        /*{# keyup 点击按钮,松开 触发 #}*/
        $('#phone_input').keyup(function(){
            /*{# trim()去除左右两边空格 #}*/
            if($(this).val().trim()!=''){
                $('#sendSms').prop('disabled', false)
            }
        });

        /*{# 获取发送验证码按钮点击事件 #}*/
        $('#sendSms').click(function () {
            /*  {# 判断手机号是否符合要求 #}
              {# 获取手机号 #}*/
            var mobile = $('#phone_input').val().trim();
            console.log(mobile);
            /*{# 编写正则表达式规则 #}*/
            var re = /^1[3-9]\d{9}$/;
            /*{# 利用正则判断手机号是否正确 #}*/
            if(!re.test(mobile)){
                console.log("格式错误")
                /*{# 手机号格式不正确,输出错误信息 #}*/
                $('#phone_info').html('手机号格式错误').css('color','red');
                return false;
            }
            /*{# 再次输入正确手机号,清空错误信息 #}*/
            $('#phone_info').html('');

            /* {# 使用箭头函数(function() --> ()=> ),可以直接使用$(this) #}
             {# var _this = $(this); #}

             {# 设置倒计时长 #}*/
            var num = 59
            $('#sendSms').val(num+'秒');
            /* {# 设置计时器 #}*/
            var t = setInterval(()=>{

                /*{# disabled checked selected enabled 这些属于input元素的属性 #}
                {# 这些属性不能够用 attr 来获取，必须用prop获取 #}
                {# 除了这些属性，其他任何属性都用 attr 获取 #}
                {# prop 不能获取自定义属性 #}

                {# 为了防止触发多个定时器, 在定时的时间之内，不能在点击 #}*/
                $(this).prop('disabled', true);

                num -= 1;
                $('#sendSms').val(num+'秒');

                /*{# 停止计时器 #}*/
                if(num==0){

                    clearInterval(t);
                    $('#sendSms').val('发送验证码');
                    $(this).prop('disabled', false);

                    /*  {# _this.prop('disabled', false) #}*/

                }

            },1000);

            /* {# 通过ajax执行后端程序， 发送短信验证码 #}*/
            $.ajax({
                url: '/customerPhone/getCode',
                type: 'post',
                data: {'mobile': mobile},
                success: function (res) {
                    if (res == 200){
                       alert("验证码发送成功")
                    }
                }
            })
            return false;
        })

        //提交数据  检验验证码
        $("#login").click(() => {
            let mobile = $("#phone_input").val();
            let smsCode = $("#code").val();
            console.log(mobile, smsCode)
            $.ajax({
                url: '/customerPhone/verification',
                type: 'post',
                dataType: 'json',
                data: {
                    'mobile': mobile,
                    'smsCode': smsCode
                },
                success: function (res) {
                    console.log(res)
                    if (res.code == 200){
                        alert("登录成功");
                        location.href = "/";//跳转到主页面
                    }
                }
            })
            return false;
        });
    })


</script>
</html>
